<template>
  <div class="goodsinfo-box">
    <Title title="物流信息" style="margin-bottom:18px;"/>
    <el-row :class="{'dividing':!showMobilePage}" class="detail-row">
      <el-form :label-width="labelWidth" label-position="right">
        <el-col :span="8">
          <el-form-item label="发货单号：">
            <ToolTip :content="data.invoiceNum" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物流成本(元)：">
            <PriceColumn :real-val="data.cost" :price="data.cost / 100" />
          </el-form-item>
        </el-col>
        <el-col v-if="isAfterSale" :span="8">
          <el-form-item label="仓库收件费(元)：">
            <PriceColumn :real-val="data.warehouseFees" :price="data.warehouseFees / 100" />
          </el-form-item>
        </el-col>
        <el-col v-if="!isAfterSale" :span="8">
          <el-form-item label="联系电话：">
            <ToolTip :content="data.phone" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发货时间：">
            <span>{{ data.invoiceTime | format('YYYY/MM/DD HH:mm:ss') }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收货地址：">
            <ToolTip :content="data.address" />
          </el-form-item>
        </el-col>
        <el-col v-if="isAfterSale" :span="8">
          <el-form-item label="其他费用(元)：">
            <PriceColumn :real-val="data.otherFees" :price="data.otherFees / 100" />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import Title from '@/components/Title';
import { format } from '@/filters/date';
import { mapState } from 'vuex';
export default {
  filters: { format },
  components: { Title },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    },
    isAfterSale: {
      type: Boolean,
      default: false
    },
    labelWidth: {
      type: String,
      default: '110px'
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  }
};
</script>

<style lang="scss" scoped>
.goodsinfo-box{
  margin-top: 32px;
}
::v-deep .el-col {
  .el-form-item{
    margin-bottom: 0;
  }
}
.dividing {
  &::v-deep .el-col {
    .el-form-item__content {
      border-right: 1px solid #EBEEFD !important;
    }
    &:nth-child(3n) {
      .el-form-item__content {
        border-right: none !important;
      }
    }
    &:last-child {
      .el-form-item__content {
        border-right: none;
      }
    }
  }
}
</style>
